<template>
	<div id="sort">
		<van-tabs v-model="active" swipeable>
		  <van-tab v-for="(item,index) in sortlist" :title="item" :key="index">
			  <div class="goodss">
			  	<div class="group" v-for="i in tea_list">
			  		<img :src="i.url" alt="">
			  		<p class="tiele">{{i.title}}</p>
					<p class="text">{{i.text}}</p>
			  		<p class="price">￥{{i.price}}</p>
			  		<div class="xiao">
			  			<p>已售卖{{i.number}}件</p>
			  			<van-icon name="shopping-cart"  size="20"/>
			  		</div>
			  	</div>
			  </div>
		  </van-tab>
		</van-tabs>
	</div>
</template>

<script>
	export default {
		name: '',
		data(){
			return{
				active: 0,
				sortlist:['当季新品','热销','人气推荐','果茶系列','奶茶系列','双皮奶'],
				tea_list:[
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1886957685,1221260191&fm=224&gp=0.jpg',
						title:'夏日桃桃冰',
						price: "12.00",
						text: '清甜蜜桃口味，搭配香草风味',
						number: 58
					},
					{
						url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4096475297,1627897154&fm=26&gp=0.jpg',
						title:'少女心拿铁',
						text: "少女心爆棚的蔓越莓拿铁",
						price: "10.00",
						number: 43
					},
					{
						url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1121230777,403140859&fm=26&gp=0.jpg',
						title:'橙意满满',
						text: '给我一点橙意，陪你整个夏季',
						price: "9.00",
						number: 78
					},
					{
						url: 'http://p9.itc.cn/q_70/images03/20200619/39e917ceeb2d425fa3edf6be64fec887.jpeg',
						title:'平平无奇',
						text: '一杯好喝的平平无奇',
						price: "7.00",
						number: 28
					},
					{
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1213046967,3588724362&fm=26&gp=0.jpg',
						title:'多肉葡萄',
						text: '当季云南葡萄，颗颗手剥果肉，新鲜饱满',
						price: "11.00",
						number: 37
					},
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2607601129,2265087037&fm=26&gp=0.jpg',
						title:'布丁奶茶',
						text: '大块布丁加入，甜而不腻，超满足',
						price: "13.00",
						number: 49
					}
				]
			}
		},
		components:{
			
		}
	}
</script>

<style scoped="scoped">
	#sort{
		width: 100%;
		margin-top: 4rem;
		background: white;
		
	}
	.van-tab{
		width: 100%;
		height: 100%;
	}
	.goodss{
		width:10rem;
		height:auto;
		float: left;
		padding: 0.1333rem 0;
		margin-top: 0.2666rem;
		padding-bottom:1.3rem;
		
	}
	.group{
		width: 41%;
		height: 6.5rem;	
		background: red;
		float: left;
		font-size: 0.1866rem;
		padding: 0.2666rem;
		margin: 0.2333rem 0 0.166rem 0.566rem;
		background-color: #FFFFFF;
		border-radius: 0.2rem;
	}
	.group img{
		width: 100%;
		height: 60%;
	}
	.tiele{
		font-weight: bold;
		font-size: 0.4rem;
		white-space:nowrap;/* 文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;/* 超出宽度显示为省略号 */
	}
	.text{
		color: #BEBEBE;
		white-space:nowrap;/* 文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;/* 超出宽度显示为省略号 */
	}
	.price{
		color: #FF9224;
		font-weight: bold;
		font-size: 0.4rem;
		margin-top: 0.2rem;
	}
	.xiao{
		width: 100%;
		line-height: 0.5rem;
		height: 0.5rem;
		margin-top: 0.2rem;
	}
	.xiao p{
		width: 80%;
		float: left;
		color: #BEBEBE;
	}
	.xiao i{
		width: 20%;
		height: 0.5rem;
		float: right;
		color: #ff4500;
	}
</style>
